<script setup lang="ts">
import {
  ClockCircleOutlined,
  EyeOutlined,
  LikeOutlined,
} from "@ant-design/icons-vue";
import { onMounted, reactive, ref } from "vue";
import type { BlogVo } from "@/type";
import { useRouter } from "vue-router";
import { postApi } from "@/api";
import { filterHtmlTags, truncateString } from "@/utils";
import dayjs from "dayjs";

const router = useRouter();
const total = ref(0);
const params = reactive({
  page: 1,
  pageSize: 10,
});
const articles = ref<BlogVo[]>([]);
const getArticle = async () => {
  const result = await postApi.getArticle(params);
  articles.value = result.rows.map((item: BlogVo) => {
    return {
      ...item,
      createdAt: dayjs(String(item.createdAt)).format("YYYY-MM-DD"),
      excerpt: truncateString(filterHtmlTags(item.excerpt), 50),
    };
  });
  total.value = result.count;
};
onMounted(() => {
  getArticle();
});
</script>

<template>
  <!-- 文章列表 -->
  <div class="flex-1">
    <div class="grid gap-6">
      <div
        v-for="article in articles"
        :key="article.id"
        @click="
          router.push({
            name: 'blogItem',
            params: { id: article.id, title: article.title },
          })
        "
        class="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 cursor-pointer overflow-hidden"
      >
        <div class="relative h-48 overflow-hidden">
          <img
            :src="article.coverImage"
            :alt="article.title"
            class="w-full h-full object-coverImage"
          />
        </div>
        <div class="p-6">
          <div class="flex items-center space-x-4 text-sm text-gray-500 mb-3">
            <span class="flex items-center">
              <clock-circle-outlined class="mr-1" />
              {{ article.createdAt }}
            </span>
            <span class="flex items-center">
              <eye-outlined class="mr-1" />
              {{ article.views }}
            </span>
            <span class="flex items-center">
              <like-outlined class="mr-1" />
              {{ article.likes }}
            </span>
          </div>
          <h2 class="text-xl font-bold mb-2 hover:text-blue-600 transition-all">
            {{ article.title }}
          </h2>
          <p class="text-gray-600 mb-4 line-clamp-2">
            {{ article.excerpt }}
          </p>
          <div class="flex items-center space-x-2">
            <a-tag v-for="tag in article.tags" :key="tag" color="blue">
              {{ tag }}
            </a-tag>
          </div>
        </div>
      </div>
    </div>

    <a-pagination
      v-model:current="params.page"
      :total="total"
      :pageSize="params.pageSize"
      class="mt-8 text-center"
    />
  </div>
</template>

<style scoped></style>
